<template>
  <div id="pageWindow" class="clothesSub" :style="pageStyle">
    <HeaderBar :listIndex="2"/>
    <div>
      <div style="padding-top:0.7rem;"><img :src="pagePicArr[0]" alt=""></div>
      <div class="scroll" :style="scrollStyle">
        <ul class="list-scroll" :style="{width:(goodsList.length*2.02)+'rem'}">
          <li class="goods" v-for="(list,index) in goodsList" :key="index" @click="jumpGoods(list.goods_id)">
            <div>
              <img :src="list.img320_url" alt="">
              <p class="title">{{list.goods_name}}</p>
              <p class="price">￥{{list.flash_price}}</p>
            </div>
          </li>
        </ul>
      </div>
      <div style="position:relative;">
        <img :src="pagePicArr[1]" alt="">
        <div class="left_50" onclick="jump2special(61867)"></div>
        <div class="right_50" onclick="jump2special(61823)"></div>
      </div>
      <div style="position:relative;">
        <img :src="pagePicArr[2]" alt="">
        <div class="left_50" onclick="jump2special(62307)"></div>
        <div class="right_50" onclick="jump2special(61827)"></div>
      </div>
      <div style="position:relative;">
        <img :src="pagePicArr[3]" alt="">
        <div class="left_50" onclick="jump2special(61843)"></div>
        <div class="right_50" onclick="jump2special(61831)"></div>
      </div>
      <img :src="pagePicArr[4]" alt="">
      <div class="more"></div>
    </div>
    <!-- 加载动画 -->
    <div class="loading_box"><div class="load"><div class="circle2"></div><p>闪</p> </div></div>
    <!--返回顶部-->
    <span id="return-top"><img src="https://mstatic.shandjj.com/default/common/common-images/list_numb_press1@2x.png"></span>
  </div>
</template>
<script>
  import { backTop } from 'assets/js/sdjjPublic.js'
  import HeaderBar from '@/views/shandjj/components/HeaderBar.vue'
  import BaseUrl from '@/utils/ajaxRequest.js'
  import { resetAddress } from '@/utils/utils.js'
  export default {
    components:{HeaderBar},
    name:'clothesSub',
    data() {
      return {
        userId:'',
        pagePicArr:[],//页面图片资源
        swiperOption:{
          slidesPerView: 'auto',
          freeMode: true,
          mousewheel: true
        },
        pageStyle:{ 
          backgroundImage: '',
          backgroundRepeat: 'repeat-y',
          backgroundSize: '100%'
        },
        scrollStyle:{
          backgroundImage: '',
          backgroundRepeat: 'repeat-y',
          backgroundSize: 'contain'
        },
        goodsList:[]
      }
    },
    created(){
      this.userId=window.person.user_id;
      this.formatImgLink();
      var scrollBg=this.setLinkString+"scroll-bg.jpg";
      this.pageStyle.backgroundImage=`url(${this.pagePicArr[5]})`;
      this.scrollStyle.backgroundImage=`url(${scrollBg})`;
      this.getSeckillGoods();
    },
    mounted(){
      backTop("return-top");
      cloArea("61835,61867,61969,62309,62301,62307,61839,62305,61823,61833,61961,61865,62111,61827,61831,62113,61837,61843,62115,62177,62119,61951");
    },
    methods:{
      getSeckillGoods(){
        var _this=this;
        var ajaxt = '?t=' + new Date().getTime();
        $.get({
          url:`${BaseUrl}/index.php/goods/goodsList`+ajaxt,
          async: true,
          dataType: "json",
          data:{ goodsIds:'1023268,1491881,1298275,1298293,1425157,1425607,998399,998392,1493479,1022807,751060,723784,1472101,1472075,1487595'},
          success:function(res){
            if(res.code==200&&res.status=='success'){
              var responseData=res.data;
              _this.goodsList=responseData;
            }
          }
        })
      },
      jumpGoods(goodsId){ jump2good(goodsId) },
      //处理静态资源地址
      formatImgLink(){
        var tempLink=resetAddress();
        var tempLink=resetAddress();
        if(tempLink.type=='devLine'){
          this.setLinkString=`${tempLink.assetsLink}/default/ActiveImg/celebration/img/`;
        }else if(tempLink.type=='testLine'){
          this.setLinkString=`${tempLink.assetsLink}/default/ActiveImg/celebration/img/`;
        }else if(tempLink.type=='onLine'){
          this.setLinkString=`${tempLink.assetsLink}/default/ActiveImg/celebration/img/`;
        };
        console.log(this.setLinkString);
        this.pagePicArr=[
          this.setLinkString+"pic30001.jpg",
          this.setLinkString+"pic30002.jpg",
          this.setLinkString+"pic30003.jpg",
          this.setLinkString+"pic30004.jpg",
          this.setLinkString+"pic30005.jpg",
          this.setLinkString+"pic30006.jpg"
        ]
      },
    }
  }
</script>

<style >
.clothesSub {
  width: 100%;
  height: 100%;
  position: relative;
}
.scroll{
  height: 3.1rem;
  padding-top: 0.1rem;
  padding-left: 0.15rem;
  margin: 0rem 0.2rem 0 0.1rem;
  overflow: hidden;
  overflow-x: scroll;
  box-sizing: border-box;
}
.list-scroll{
  min-width: 100%;
  height: 100%;
  overflow: hidden;
}
.wraper{
  width: 96%;
  height: 2.9rem;
  margin: 0rem 0.1rem 0 0.1rem;
  padding-left: 0.15rem;
  overflow: hidden;
}
.goods{
  float: left;
  width:1.9rem;
  margin: 0.08rem 0.12rem 0rem 0rem;
  padding: 0.03rem;
  margin-right: 0.12rem;
  border:1px solid #333;
}
.goods img{
  width: 100%;
  border:none;
  vertical-align: middle;
} 
.goods .title{
  width: 100%;
  line-height: 0.32rem;
  font-size: 0.28rem;
  color: #333;
  text-align: center;
  margin: 0.1rem 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
} 
.goods .price{
  width: 100%;
  line-height: 0.36rem;
  font-size: 0.24rem;
  color: #fff;
  background: #333;
  text-align: center;
  white-space: nowrap;
  border-radius: 0.3rem;
} 
#share {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0.15rem 0.3rem;
  position: absolute;
  top: 0.5rem;
  right: 0.2rem;
  box-sizing: content-box;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 1.2s;
}
.fade-enter, .fade-leave-to {
  opacity: 0.65;
}
</style>